<template>
	<div class="page flex flex-item-v-center flex-nowarp flex-c" :style="{backgroundImage:'url(' + imgs + ')'}">
		<div class="list-first flex flex-r flex-item-between">
			<div v-for="(item,index) in goods.first " class="goods-item flex-c flex flex-item-v-end flex-item-l-center" :style="{backgroundImage:'url('+item.imgs+')'}" @click="goGoods(item.id)">
				<div class="header">{{item.header}}</div>
				<div class="main">{{item.main}}</div>
				<!--<div class="salePrice"><span>活动价:¥</span>{{item.salePrice}}</div>-->
				<div class="activePrice">¥ <i><span>{{item.activePrice}}</span>.00</i></div>
			</div>

		</div>
		<div class="list-second flex flex-item-between flex-r flex-warp" :style="{backgroundImage:'url('+goods.secondbg+')'}">
			<div v-for="(item,index) in goods.second" class="goods-item flex flex-item-v-center flex-c" @click="goGoods(item.id)">
				<img :src="item.imgs" class="goods-img" />
				<div class="header flex flex-item-center">{{item.header}}</div>
				<div class="main flex flex-item-center">{{item.main}}</div>
				<div class="flex activePrice  flex-item-center">¥<span>{{item.activePrice}}</span>
					<div>立即购买</div>
				</div>
			</div>
		</div>
		<div class="list-three flex flex-item-between flex-r flex-warp" :style="{backgroundImage:'url('+goods.thirdbg+')'}">
			<div v-for="(item,index) in goods.third" class="goods-item flex flex-item-v-center flex-c" @click="goGoods(item.id)">
				<img :src="item.imgs" class="goods-img" />
				<div class="header flex flex-item-center">{{item.header}}</div>
				<div class="main flex flex-item-center">{{item.main}}</div>
				<div class="flex activePrice  flex-item-center">¥<span>{{item.activePrice}}</span>
					<div>立即购买</div>
				</div>
			</div>
		</div>
		<div class="list-forth flex flex-item-between flex-r flex-warp" :style="{backgroundImage:'url('+goods.forthbg+')'}">
			<div v-for="(item,index) in goods.forth" class="goods-item flex flex-item-v-center flex-c" @click="goGoods(item.id)">
				<img :src="item.imgs" class="goods-img" />
				<div class="header flex flex-item-center">{{item.header}}</div>
				<div class="main flex flex-item-center">{{item.main}}</div>
				<div class="flex activePrice  flex-item-center">¥<span>{{item.activePrice}}</span>
					<div>立即购买</div>
				</div>
			</div>
		</div>
		<go-home></go-home>
	</div>

</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	import GoHome from '@/components/huabanShop/goHome';
	export default {
		components: {
			'go-home': GoHome
		},
		data() {
			return {
				imgs: require('../../../assets/imgs/20180520/520-bg.jpg'),
				goods: {
					secondbg: require('../../../assets/imgs/20180520/type2-bg.png'),
					thirdbg: require('../../../assets/imgs/20180520/type3-bg.png'),
					forthbg: require('../../../assets/imgs/20180520/type4-bg.png'),
					first: [{
						id: 7813,
						imgs: require('../../../assets/imgs/20180520/type1-1.png'),
						header: "Dior/迪奥",
						main: "烈艳蓝金唇膏",
						salePrice: 259,
						activePrice: 235,
					}, {
						id: 6908,
						imgs: require('../../../assets/imgs/20180520/type1-2.png'),
						header: "YSL/圣罗兰",
						main: "迷魅纯漾唇膏",
						salePrice: 282,
						activePrice: 235,
					}, {
						id: 7882,
						imgs: require('../../../assets/imgs/20180520/type1-3.png'),
						header: "YSL/圣罗兰",
						main: "迷魅圆管口红",
						salePrice: 264,
						activePrice: 245,
					}],
					second: [{
						id: 8102,
						imgs: require('../../../assets/imgs/20180520/type2-1.jpg'),
						header: "【520特惠】迪奥",
						main: "迷魅圆管口红 #080",
						salePrice: 248,
						activePrice: 234,
					}, {
						id: 8112,
						imgs: require('../../../assets/imgs/20180520/type2-2.jpg'),
						header: "【520特惠】圣罗兰",
						main: "迷魅亮彩唇膏 圆管45号",
						salePrice: 248,
						activePrice: 229,
					}, {
						id: 8046,
						imgs: require('../../../assets/imgs/20180520/type2-3.jpg'),
						header: "【520特惠】圣罗兰",
						main: "迷魅纯漾唇膏 方管57号",
						salePrice: 237,
						activePrice: 220,
					}, {
						id: 8045,
						imgs: require('../../../assets/imgs/20180520/type2-4.jpg'),
						header: "【520特惠】圣罗兰",
						main: "迷魅亮彩唇膏 圆管30号",
						salePrice: 248,
						activePrice: 229,
					}],
					third: [{
						id: 8113,
						imgs: require('../../../assets/imgs/20180520/type3-1.jpg'),
						header: "CK卡文克莱手表",
						main: "女表简约镀金钢带石英表",
						salePrice: 1319,
						activePrice: 1299,
					}, {
						id: 8114,
						imgs: require('../../../assets/imgs/20180520/type3-2.jpg'),
						header: "CK卡文克莱手表",
						main: "女表简约钢带石英表",
						salePrice: 1319,
						activePrice: 1299,
					}, {
						id: 8115,
						imgs: require('../../../assets/imgs/20180520/type3-3.jpg'),
						header: "CK卡文克莱手表",
						main: "女表简约银盘钢带",
						salePrice: 1319,
						activePrice: 1299,
					}, {
						id: 6180,
						imgs: require('../../../assets/imgs/20180520/type3-4.jpg'),
						header: "阿玛尼 女士手表",
						main: "粉色表盘时尚潮流石英腕表",
						salePrice: 1209,
						activePrice: 1119,
					}, {
						id: 6119,
						imgs: require('../../../assets/imgs/20180520/type3-5.jpg'),
						header: "DW/丹尼尔惠灵顿",
						main: "白色表盘深棕皮带男表",
						salePrice: 1099,
						activePrice: 999,
					}, {
						id: 6121,
						imgs: require('../../../assets/imgs/20180520/type3-6.jpg'),
						header: "DW/丹尼尔惠灵顿",
						main: "白色表盘黑色皮带男表",
						salePrice: 1099,
						activePrice: 999,
					}],
					forth: [{
						id: 5246,
						imgs: require('../../../assets/imgs/20180520/type4-1.jpg'),
						header: "SWAROVSKI施华洛世奇",
						main: "黑天鹅项链链坠",
						salePrice: 482,
						activePrice: 449,
					}, {
						id: 5307,
						imgs: require('../../../assets/imgs/20180520/type4-2.jpg'),
						header: "SWAROVSKI施华洛世奇",
						main: "镶密钻天鹅项链",
						salePrice: 492,
						activePrice: 455,
					}, {
						id: 5299,
						imgs: require('../../../assets/imgs/20180520/type4-3.jpg'),
						header: "SWAROVSKI施华洛世奇",
						main: "圆环水晶项链链坠",
						salePrice: 536,
						activePrice: 499,
					}, {
						id: 5188,
						imgs: require('../../../assets/imgs/20180520/type4-4.jpg'),
						header: "SWAROVSKI施华洛世奇",
						main: "锁骨链心跳项链",
						salePrice: 707,
						activePrice: 659,
					}, {
						id: 5289,
						imgs: require('../../../assets/imgs/20180520/type4-5.jpg'),
						header: "SWAROVSKI施华洛世奇",
						main: "星座系列精美射手座项链",
						salePrice: 568,
						activePrice: 526,
					}, {
						id: 8032,
						imgs: require('../../../assets/imgs/20180520/type4-6.jpg'),
						header: "SWAROVSKI施华洛世奇",
						main: "DUOEVILEYE链坠  ",
						salePrice: 551,
						activePrice: 539,
					}]
				}
			}
		},
		methods: {
			goGoods(id) {
				utils.goGoods(id)
			}
		}

	}
</script>

<style lang="less" rel="stylesheet/less" scoped="">
	@import './css/index.less';
</style>